<template>
  <div class="login-container">
    <div class="login-left-section">
      <div class="left-content">
        <div class="logo">
          <div class="logo-icon">
            <span>🤝</span>
          </div>
          <h1 class="system-title">智能伙伴后台管理</h1>
        </div>
        <p class="system-description">连接优秀的人，共创未来</p>
        <div class="feature-list">
          <div class="feature-item">
            <span class="feature-icon">🔍</span>
            <span>智能匹配</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">👥</span>
            <span>团队协作</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">💬</span>
            <span>即时沟通</span>
          </div>
        </div>
      </div>
    </div>
    <div class="login-right-section">
      <div class="login-form-wrapper">
        <div class="login-header">
          <h2 class="welcome-title">欢迎登录</h2>
          <p class="login-subtitle">登录后即可使用智能伙伴协作系统</p>
        </div>
        
        <div class="login-tabs">
          <el-tabs v-model="activeTab" type="card" class="login-tabs-card">
            <el-tab-pane label="账户密码登录" name="account" />
            <el-tab-pane label="手机号登录" name="phone" />
            <el-tab-pane label="邮箱登录" name="email" />
          </el-tabs>
        </div>
        
        <el-form 
          ref="loginFormRef" 
          :model="loginForm" 
          :rules="loginRules" 
          class="login-form"
          label-position="left"
          label-width="80px"
        >
          <el-form-item label="账户" prop="username" v-if="activeTab === 'account'">
            <el-input 
              v-model="loginForm.username" 
              placeholder="请输入用户名"
              prefix-icon="User"
              size="large"
              :validate-event="false"
            />
          </el-form-item>
          
          <el-form-item label="手机号" prop="phone" v-else-if="activeTab === 'phone'">
            <el-input 
              v-model="loginForm.phone" 
              placeholder="请输入手机号"
              prefix-icon="Phone"
              size="large"
              :validate-event="false"
            />
          </el-form-item>
          
          <el-form-item label="邮箱" prop="email" v-else-if="activeTab === 'email'">
            <el-input 
              v-model="loginForm.email" 
              placeholder="请输入邮箱"
              prefix-icon="Message"
              size="large"
              :validate-event="false"
            />
          </el-form-item>
          
          <el-form-item label="密码" prop="password" v-if="activeTab === 'account'">
            <el-input 
              v-model="loginForm.password" 
              type="password" 
              placeholder="请输入密码"
              prefix-icon="Lock"
              show-password
              size="large"
              :validate-event="false"
            />
          </el-form-item>
          
          <el-form-item label="验证码" prop="verificationCode">
            <div class="verification-code-wrapper">
              <el-input 
                v-model="loginForm.verificationCode" 
                placeholder="请输入验证码"
                prefix-icon="DocumentCopy"
                size="large"
                :validate-event="false"
              />
              <div class="verification-code-img">
                {{ generateVerificationCode() }}
              </div>
            </div>
          </el-form-item>
          
          <el-form-item>
            <el-button 
              type="primary" 
              class="login-button"
              size="large"
              @click="handleLogin"
              :loading="loading"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
        
        <div class="login-footer">
          <div class="footer-links">
            <el-link type="primary" :underline="false">忘记密码?</el-link>
            <el-link type="primary" :underline="false">注册</el-link>
          </div>
        </div>
        
        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElTabs, ElTabPane, ElLink } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const loginFormRef = ref(null)
const loading = ref(false)
const errorMessage = ref('')
const activeTab = ref('account')
let verificationCodeValue = ''

const loginForm = reactive({
  username: '',
  password: '',
  phone: '',
  email: '',
  verificationCode: ''
})

// 动态验证规则
const loginRules = reactive({
  username: [
    { required: activeTab.value === 'account', message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: activeTab.value === 'account', message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: activeTab.value === 'phone', message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
  ],
  email: [
    { required: activeTab.value === 'email', message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { validator: validateVerificationCode, trigger: 'blur' }
  ]
})

// 验证码验证
function validateVerificationCode(rule, value, callback) {
  if (value.toUpperCase() !== verificationCodeValue.toUpperCase()) {
    callback(new Error('验证码错误'))
  } else {
    callback()
  }
}

// 生成验证码
function generateVerificationCode() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
  verificationCodeValue = ''
  for (let i = 0; i < 4; i++) {
    verificationCodeValue += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  return verificationCodeValue
}

// 监听标签页切换
activeTab.value = 'account'

const handleLogin = async () => {
  try {
    // 重置错误信息
    errorMessage.value = ''
    
    // 表单验证
    await loginFormRef.value.validate()
    
    // 设置加载状态
    loading.value = true
    
    // 模拟登录请求延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 简单的登录逻辑验证
    let isValidLogin = false
    let username = ''
    
    if (activeTab.value === 'account') {
      isValidLogin = loginForm.username === 'admin' && loginForm.password === 'admin123'
      username = loginForm.username
    } else if (activeTab.value === 'phone') {
      // 模拟手机号登录验证
      isValidLogin = loginForm.phone === '13800138000'
      username = loginForm.phone
    } else if (activeTab.value === 'email') {
      // 模拟邮箱登录验证
      isValidLogin = loginForm.email === 'admin@example.com'
      username = loginForm.email
    }
    
    if (isValidLogin) {
      // 存储登录状态
      sessionStorage.setItem('isLoggedIn', 'true')
      sessionStorage.setItem('username', username)
      sessionStorage.setItem('loginType', activeTab.value)
      
      // 显示成功消息
      ElMessage.success('登录成功')
      
      // 跳转到首页
      router.push('/')
    } else {
      errorMessage.value = activeTab.value === 'account' 
        ? '用户名或密码错误' 
        : '账号不存在或验证失败'
    }
  } catch (error) {
    // 表单验证失败时的处理
    if (error.name !== 'Error') {
      console.error('登录表单验证失败:', error)
    }
  } finally {
    // 重置加载状态
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}

/* 左侧介绍区域 */
.login-left-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 100px;
  color: white;
}

.left-content {
  max-width: 400px;
}

.logo {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.logo-icon {
  font-size: 48px;
  margin-right: 16px;
}

.system-title {
  font-size: 36px;
  font-weight: bold;
  margin: 0;
  background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.system-description {
  font-size: 20px;
  margin-bottom: 20px;
  opacity: 0.9;
  line-height: 1.5;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-item {
  display: flex;
  align-items: center;
  font-size: 18px;
  opacity: 0.9;
}

.feature-icon {
  font-size: 24px;
  margin-right: 16px;
}

/* 右侧登录表单区域 */
.login-right-section {
  width: 500px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

.login-form-wrapper {
  width: 100%;
  padding: 0 60px;
  animation: fadeIn 0.5s ease-in-out;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.welcome-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.login-subtitle {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

.login-tabs {
  margin-bottom: 30px;
}

.login-tabs-card {
  --el-tabs-card-active-color: #667eea;
}

.login-form {
  width: 100%;
}

.verification-code-wrapper {
  display: flex;
  gap: 12px;
}

.verification-code-wrapper .el-input {
  flex: 1;
}

.verification-code-img {
  width: 120px;
  height: 40px;
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 5px;
  color: #303133;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.verification-code-img:hover {
  background: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
  transform: translateY(-1px);
}

.login-button {
  width: 100%;
  font-size: 16px;
  padding: 12px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.login-footer {
  margin-top: 20px;
}

.footer-links {
  display: flex;
  justify-content: space-between;
}

.error-message {
  color: #f56c6c;
  font-size: 14px;
  margin-top: 15px;
  text-align: center;
  animation: shake 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-5px);
  }
  40%, 80% {
    transform: translateX(5px);
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .login-left-section {
    padding: 0 50px;
  }
  
  .login-right-section {
    width: 450px;
  }
}

@media (max-width: 992px) {
  .login-left-section {
    display: none;
  }
  
  .login-right-section {
    width: 100%;
    box-shadow: none;
  }
  
  .login-form-wrapper {
    padding: 0 40px;
  }
}

@media (max-width: 576px) {
  .login-form-wrapper {
    padding: 0 20px;
  }
  
  .welcome-title {
    font-size: 24px;
  }
  
  .logo-icon {
    font-size: 40px;
  }
  
  .system-title {
    font-size: 30px;
  }
}
</style>